<template>
  <u-header>
    <template #nav>
      <global-nav curr="game" />
    </template>
  </u-header>
  <div class="main">
    <div class="wrapper2">
      <div class="intro">
        <!-- <p class="wow animate__fadeIn" data-wow-delay="1s" data-wow-duration="2s">
          《全民学霸》是一款模拟经营类游戏,以独特的经营学校为主要玩法展开，
          <br />
          你需要认真经营，科学规划，系统的布局，这样才能打造全球超一流的现代校园。
          作为学校的经营者，不仅要需要考虑招募品质各异的教学老师、培养各色学生等等多种因素
          ，最重要的是布局校园设施、进行课题挑战，宣传扩张，雇人提升老师技能，参加知识大赛等
          游戏操作简单，可随时拿起随时放下，非常适合杀掉无聊的通勤时间;丰厚的玩家福利,
          拯救各种频临破产的学校,给你前所未有的校园经营体验！
        </p> -->
        <img :src="getAssetsFile('intro.png')" alt="学堂介绍">
      </div>
      <div class="section">
        <div class="con">
          <circle-swipe></circle-swipe>
        </div>
      </div>
      <div class="mt-10 section section2 ">
        <div class="title2"></div>
        <div class="relative mt-3 con">
          <school-swipe></school-swipe>
          <div class="absolute people"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import UHeader from './UHeader.vue'
import SchoolSwipe from './SchoolSwipe.vue'
import CircleSwipe from './CircleSwipe2.vue'
import GlobalNav from '@/components/GlobalNav.vue'

import WOW from 'wow.js'
import 'animate.css'
import 'animate.css/animate.compat.css'

onMounted(async () => {
  const wow = new WOW({
    boxClass: 'wow',
    animateClass: 'animated',
    offset: 0,
    mobile: true,
    live: true,
    scrollContainer: null,
    resetAnimation: true
  })
  wow.init()
})

function getAssetsFile(url) {
  return new URL(`../assets/${url}`, import.meta.url)
}
</script>

<style lang="scss" scoped>
.main {
  height: 2518px;
  background: #f6fbff no-repeat center bottom url(../assets/bg_main.webp);
  overflow: hidden;
}
.line {
  margin: 80px 0;
  background: url(../assets/line.jpg) no-repeat center center;
  background-size: 100% 1px;
  width: 100%;
  height: 1px;
}
// .intro {
//   margin: 50px 0 0 106px;
//   padding: 60px 100px 0 42px;
//   color: #56160f;
//   width: 1319px;
//   height: 529px;
//   line-height: 2;
//   background: url(../assets/bg_intro.png) no-repeat center center;
// }
.intro{
  margin:50px auto 10px;
  height:516px;
  width:1335px;
}
.section{
  .title1{
    margin-top: 20px;
    height:116px;
    background: url(../assets/title_1.png) no-repeat center center;
  }
  .title2{
    margin-top: 20px;
    height:119px;
    background: url(../assets/title_2.png) no-repeat center center;
  }
  &.section2{
    .con{
      height:750px;
      padding-top: 80px;
      background:url(../assets/bg_school.png) no-repeat center center;
    }
  }
}
.people{
  width:136px;
  height:299px;
  right:70px;
  bottom:-10px;
  z-index: 9;
  background:url(../assets/people.png) no-repeat center center;
}
</style>
